import { move } from "./gather"
 
// 获取元素
const imgBox = document.querySelector('.imgBox')
const pointBox = document.querySelector('.pointBox')
const bannerBox = document.querySelector('.banner')
 
// 定义一个变量 表示第几张图片
let index = 1
 
let time
 
// 定义一个开关
let flag = true
 
 
// 复制元素
copyEle()
function copyEle() {
    // 首先我们要复制第一张图片和最后一张图片
    // 把第一张插入到最后面
    // 把最后一张插入到最前面
    let first = imgBox.firstElementChild.cloneNode(true)
    let last = imgBox.lastElementChild.cloneNode(true)
    // 插入到对应的位置
    imgBox.appendChild(first)
    imgBox.insertBefore(last, imgBox.firstElementChild)
    // 修改ul的宽度
    imgBox.style.width = imgBox.children.length * 100 + '%'
    // 向前移动一个banner的宽度
    // imgBox.style.left = -1 * bannerBox.clientWidth + 'px'
    imgBox.style.left = -794 + 'px'
}
 
// 设置焦点
setPoint()
function setPoint() {
    let num = imgBox.children.length - 2
    // 创建元素
    for (let i = 0; i < num; i++) {
        let li = document.createElement('li')
        // 插入到对应的位置
        pointBox.appendChild(li)
 
        // 添加一个类名
        li.classList.add('item')
        // 添加一个自定义属性 用来表示索引
        li.dataset.id = i
 
        if (i === 0) {
            li.classList.add('active')
        }
 
        // 设置pointBox的宽度
        pointBox.style.width = num * (20 + 10) + 'px'
    }
}
 
// 自动轮播
autoPlay()
function autoPlay() {
    // 定时器 
    time = setInterval(() => {
        // 首先要判断 开关的一个状态
        if (flag === false) return
        flag = false
        index++
        move(imgBox, { left: -index * bannerBox.clientWidth }, moveEnd)
    }, 2000)
}
 
// 运动结束
 
/* 
    我们是不是要瞬间定义为到第一张
    我们的焦点的索引   0   1   2   3   4
    我们的图片的索引0  1   2   3   4   5   6
     
*/
function moveEnd() {
    if (index === imgBox.children.length - 1) {
        index = 1
        imgBox.style.left = -index * bannerBox.clientWidth + 'px'
    }
    if (index === 0) {
        index = imgBox.children.length - 2
        imgBox.style.left = -index * bannerBox.clientWidth + 'px'
    }
 
    // 焦点跟随
    // 首先要去掉所有类名  那个有给那个添加
    for (let i = 0; i < pointBox.children.length; i++) {
        pointBox.children[i].classList.remove('active')
    }
    pointBox.children[index - 1].classList.add('active')
 
 
    // 这个时候运动全部结束
    flag = true
}
 



// 鼠标进入和离开
overOut()
function overOut() {
    bannerBox.addEventListener('mouseover', () => {
        // 关闭定时器
        clearInterval(time)
    })
    bannerBox.addEventListener('mouseout', () => {
        autoPlay()
    })
}
 



// 点击切换
// 通过分析 我们需要使用事件委托
// 事件条件给 banner 盒子
clickChange()
function clickChange() {
    bannerBox.addEventListener('click', e => {
        e = e || window.event
        // 找到目标元素
        let target = e.target || e.srcElement
 
        // 左按钮
        if (target.className === 'left') {
            // 首先要判断 开关的一个状态
            if (flag === false) return
            flag = false
            index--
            move(imgBox, { left: -index * bannerBox.clientWidth }, moveEnd)
        }
        // 右按钮
        if (target.className === 'right') {
            // 首先要判断 开关的一个状态
            if (flag === false) return
            flag = false
            index++
            move(imgBox, { left: -index * bannerBox.clientWidth }, moveEnd)
        }
        // 每一个焦点
        if (target.className === 'item') {
            // 首先要判断 开关的一个状态
            if (flag === false) return
            flag = false
            // 这个时候我们需要获取到现在是那张图片
            // 获取自定义属性
            index = target.dataset.id - 0 + 1
            move(imgBox, { left: -index * bannerBox.clientWidth }, moveEnd)
        }
    })
}